.vuefinder__upload-modal__drag-hint {
  @apply mb-2 hidden text-sm text-(--vf-text-secondary) sm:mb-3 sm:block lg:text-base;
}

.vuefinder__themer .vuefinder__upload-modal__drop-area {
  @apply mt-2 mb-4 flex h-[120px] cursor-pointer items-center justify-center rounded border-2 border-dashed border-(--vf-border-primary) text-lg text-(--vf-text-secondary) select-none;
}

.vuefinder__upload-modal__buttons {
  @apply mb-1 text-(--vf-text-secondary);
}

.vuefinder__upload-modal__file-list {
  @apply mb-1 max-h-[200px] overflow-y-auto pr-1 text-sm text-(--vf-text-secondary);
}

.vuefinder__upload-modal__file-entry {
  @apply flex p-0.5;
}

.vuefinder__upload-modal__file-entry:hover {
  @apply bg-(--vf-bg-hover);
}

.vuefinder__upload-modal__file-icon {
  @apply flex h-6 w-6 shrink-0 cursor-default rounded border border-(--vf-border-primary) bg-(--vf-bg-tertiary) text-xs text-(--vf-text-primary);
}

.vuefinder__upload-modal__file-icon-text {
  @apply m-auto text-base;
}

.vuefinder__upload-modal__file-info {
  @apply ml-1 h-fit w-full;
}

.vuefinder__upload-modal__file-name {
  @apply text-left text-(--vf-text-primary);
}

.vuefinder__upload-modal__file-status {
  @apply flex text-left break-all text-(--vf-text-secondary);
}

.vuefinder__themer .vuefinder__upload-modal__file-remove {
  @apply ml-auto flex h-5 w-5 items-center justify-center rounded border border-(--vf-border-primary) bg-(--vf-bg-tertiary) text-base leading-none font-medium text-(--vf-text-secondary) focus:outline-none sm:text-xs;
}

.vuefinder__themer .vuefinder__upload-modal__file-remove:hover {
  @apply text-(--vf-accent-error);
}

.vuefinder__themer .vuefinder__upload-modal__file-remove.disabled {
  @apply bg-(--vf-bg-disabled) opacity-50;
}

.vuefinder__themer .vuefinder__upload-modal__file-remove-icon {
  @apply h-5 w-5;
}

/* Upload actions (Select Files + caret) */
.vuefinder__upload-actions {
  @apply inline-flex items-stretch;
}

.vuefinder__upload-actions--block {
  @apply w-full;
}

.vuefinder__upload-actions--ring {
  @apply rounded-md ring-1 ring-(--vf-border-primary);
}

.vuefinder__upload-actions__main {
  @apply !m-0 h-9 flex-1 cursor-pointer !rounded-l-md !rounded-r-none border border-(--vf-border-primary) bg-(--vf-bg-primary) px-3 text-sm text-(--vf-text-primary) select-none;
}

.vuefinder__upload-actions__trigger {
  @apply !m-0 -ml-px flex h-9 w-9 cursor-pointer items-center justify-center !rounded-l-none !rounded-r-md border !border-l-0 border-(--vf-border-primary) bg-(--vf-bg-primary) !px-0 text-(--vf-text-primary) select-none;
}

.vuefinder__upload-actions__main:hover,
.vuefinder__upload-actions__trigger:hover {
  @apply bg-(--vf-bg-hover);
}

.vuefinder__upload-actions__menu {
  @apply absolute bottom-full left-0 z-10 mb-2 min-w-[12rem] rounded-md border border-(--vf-border-primary) bg-(--vf-bg-primary) py-1 text-sm shadow-lg;
}

.vuefinder__upload-actions__item {
  @apply block px-3 py-2 text-left text-(--vf-text-primary);
}

.vuefinder__upload-actions__item:hover {
  @apply bg-(--vf-bg-hover);
}

.vuefinder__upload-actions__separator {
  @apply my-1 h-px bg-(--vf-border-primary);
}

/* Disabled states */
.vuefinder__upload-actions__main:disabled,
.vuefinder__upload-actions__trigger:disabled {
  @apply cursor-not-allowed border-(--vf-border-primary) bg-(--vf-bg-disabled) text-(--vf-text-disabled) opacity-50;
}

/* Make Upload button visually disabled inside modal when :disabled */
.vuefinder__modal-layout .vf-btn[disabled] {
  @apply cursor-not-allowed opacity-50;
}
.vuefinder__modal-layout .vf-btn-primary[disabled] {
  @apply border-(--vf-border-primary) bg-(--vf-bg-disabled) text-(--vf-text-disabled);
}
